<template>
  <div class="recharge-page">
    <van-nav-bar title="汪汪币充值" left-arrow @click-left="onBack" />
    <div class="account-info">
      <p>账户余额：<span class="balance">{{this.user.userglod1}}汪汪币（永久有效）</span></p>
    </div>
    <div class="recharge-options">
      <p>1元 = 100汪汪币</p>
      <van-row gutter="10">
        <van-col span="8" v-for="(option, index) in rechargeOptions" :key="index">
          <div
              class="recharge-card"
              :class="{ selected: selectedOption === index }"
              @click="selectOption(index)"
          >
            <p class="amount">{{ option.amount }}元</p>
            <p class="coins">{{ option.coins }}汪币</p>
            <span class="bonus" v-if="option.bonus">赠{{ option.bonus }}%</span>
          </div>
        </van-col>
      </van-row>
    </div>
    <div class="payment-method">
      <p>支付方式</p>
      <div class="payment-buttons">
        <van-button
            type="default"
            block
            :class="{ selected: paymentMethod === 'alipay' }"
            @click="selectPayment('alipay')"
        >
          支付宝
        </van-button>
        <van-button
            type="default"
            block
            :class="{ selected: paymentMethod === 'wechat' }"
            @click="selectPayment('wechat')"
        >
          微信
        </van-button>
      </div>
    </div>
    <div class="confirm-btn">
      <van-button type="primary" block @click="confirmRecharge">
        确认充值
      </van-button>
    </div>
    <p class="note">
      充值{{ selectedOption !== null && rechargeOptions[selectedOption] ? rechargeOptions[selectedOption].amount : 0 }}元，
      共{{ selectedOption !== null && rechargeOptions[selectedOption] ? rechargeOptions[selectedOption].coins : 0 }}汪汪币
    </p>
    <p class="disclaimer">
      1、货币兑换比例，1元人民币=100汪汪币，充值后金额平台可用。
    </p>
  </div>
</template>

<script>
import { Toast } from "vant";
import axios, {Axios} from "axios";

export default {
  name: "Recharge",
  data() {
    return {
      selectedOption: null,
      paymentMethod: "wechat",
      rechargeOptions: [
        { amount: 10, coins: 1000, bonus: 0 },
        { amount: 20, coins: 2020, bonus: 1 },
        { amount: 50, coins: 5125, bonus: 2.5 },
        { amount: 100, coins: 10500, bonus: 5 },
        { amount: 200, coins: 21500, bonus: 7.5 },
        { amount: 500, coins: 55000, bonus: 10 },
      ],
      billNo:"",
      user:{},
      order:{},
      one:{},
    };
  },
  methods: {
    findUser(){
      axios.post("http://localhost:9999/api-user/user/findOneUser?id="+this.one.id).then(res=>{
        this.user=res.data
      })
    },
    onBack() {
      // 返回上一页
      this.$router.back();
    },
    selectOption(index) {
      this.selectedOption = index;
    },
    selectPayment(method) {
      this.paymentMethod = method;
    },
    confirmRecharge() {
      if (this.selectedOption === null) {
        Toast.fail("请选择充值金额");
        return;
      }

      const timestamp = Date.now(); // 获取当前时间戳
      const randomPart = Math.random().toString(36).substr(2, 8); // 生成8位的随机字符串（36进制表示的随机数转换而来）
      this.billNo = `${timestamp}${randomPart}`; // 组合时间戳和随机字符串形成账单号
      console.log(this.billNo)

      const selected = this.rechargeOptions[this.selectedOption];

      this.order.uid = this.user.id;
      this.order.code = this.billNo;
      this.order.amount = selected.coins;
      if (this.paymentMethod === "wechat"){
        this.order.recharge = 2;
        this.saveRecharge();
        console.log(`已选择充值 ${selected.amount} 元，共 ${selected.coins} 汪汪币,选择微信支付`);
        this.$router.push({
          path:"/wechatPay",
          query:{code:this.billNo}
        })
      }else{
        this.order.recharge = 1;
        this.saveRecharge();
        console.log(`已选择充值 ${selected.amount} 元，共 ${selected.coins} 汪汪币,选择支付宝支付`);
      }

    },
    saveRecharge(){
      axios.post("http://localhost:9999/api-user/recharge/saveRecharge",this.order).then(res=>{
        console.log("添加成功")
      })
    }
  },
  created(){

    this.one = JSON.parse(localStorage.getItem("user"))

    this.findUser();

  }
};
</script>

<style scoped>
.recharge-page {
  padding: 16px;
}

.account-info {
  margin-bottom: 20px;
}

.balance {
  font-weight: bold;
  color: #f56c6c;
}

.recharge-options {
  margin-bottom: 20px;
}

.recharge-options p {
  margin-bottom: 10px;
  color: #999;
}

.recharge-card {
  text-align: center;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: #f9f9f9;
  transition: all 0.3s;
  box-sizing: border-box;
}

.recharge-card.selected {
  border-color: #f56c6c;
  background-color: #fff;
}

.amount {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.coins {
  color: #666;
}

.bonus {
  margin-top: 5px;
  display: inline-block;
  font-size: 12px;
  color: #f56c6c;
}

.payment-method {
  margin-bottom: 20px;
}

.payment-buttons {
  display: flex;
  gap: 10px;
}

.payment-buttons .van-button {
  flex: 1;
  border-radius: 8px;
  border: 1px solid #eaeaea;
}

.payment-buttons .van-button.selected {
  border-color: #f56c6c;
  background-color: #fef0f0;
  color: #f56c6c;
}

.confirm-btn {
  margin-top: 20px;
}

.note {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.disclaimer {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}
</style>
